﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yxDialog Demo</title>

<link href="skin/default/jquery.yxDialog.css" rel="stylesheet" id='yxDialogCss'>

<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jquery.yxDialog.js"></script>
<script type="text/javascript">
$(function(){
  $.yxDialog.initCss({});
});

function showIt(){
  $.yxDialog.createWin({
        message: 'http://www.baidu.com',    //消息框内容(当 iframe 为 true 时， 就输入网址
        width: 800,       //消息框宽度
        height: 300,      //消息框高度
        title: '这里是标题',      //消息框标题
        skin: 'default',        //皮肤， 以 skin 目录下面的皮肤目录名为值
        callbackAble: false,  //是否打开回调事件，默认不打开, 如有需要,手动传送参数到closeWin来启动回调事件
        callback: function(rv) {},  //回调事件，默认空函数, 传入参数为关闭事件的返回值
        dialogTarget: window.top,      // 添加弹出层的目标窗口(有 window.top, window.parent, window.self
        maskAlphaColor: '#ccc', //遮罩透明色，默认黑色
        maskAlpha: 0.6,     //遮罩透明度，默认0.1
        iframe: true,      //iframe模式，默认不是
        hasBootstrapCss:false,  //是否已经有bootstrap 样式引入，如果已有，则不引入自带的样式，样式与 bootstrap 区别在于样式前页会增加 'yx-'; 如原来的 bootstrap 为 .modal-dialog, 则现在为 .yx-modal-dialog
        btn: [{name:"确定", callback: function(){}}, {name:"关闭", callback: function(){}}],        //消息框显示的按钮，默认无(为JSON对象，格式 [{name:"确定", callback: c1}, {name:"关闭", callback: c2}])
        closeTime: 0,     //是否自动关闭，如果数值大于0， 则按毫秒值自动关闭
        fixPosition: false,   // 是否固定位置（即传入的位置[t,l]已经包括了scrollLeft() 和 scrollTop()
        scrollAble: false,      // 是否随滚动条滚动，默认为滚动
        dragable: true,      //是否允许拖动，默认不允许
        resizeable: true,      //是否允许调节窗口大小，默认不允许
        titleBar: true,     //是否显示标题栏，默认显示
        modal: false,      //是否显示遮罩，默认显示
        alarm: true,     //是否打开振动提醒，默认不打开
        winPos: 'r',      //消息框弹出的位置，默认在页面中间(可以输入[0, 0]（left，top）， 或者9个位置，'t'顶，'l'左, 'b'底，'r'右, 'lt'左上, 'lb'左下, 'rt'右上, 'rb'右下, 'c'居中) 
        winAlpha: 0.8,      //拖动时消息框的透明度，默认0.8
        closeBtn: true,     //是否显示关闭按钮，默认显示
        useSlide: false,    //是否启用消息框的淡入淡出效果，默认不启用
        slideSpeed: "slow",   //淡入淡出时间，useSlide=true时有效
        isWinMax: false,        //是否最大化窗口
        maxBtn: true,      //是否显示最大化按钮，默认不显示
        allowSelect:false,    //是否允许选择消息框内容，默认不允许
        allowRightMenu:false, //是否允许在消息框使用右键，默认不允许
        winName : "win1",           //窗口的名称， 以区分多窗口，单窗口时可以不设置
        zIndex : 100,            // 窗口的层次，遮罩为此层次减1
        returnValue : null,     // 返回值， 用于关闭事件时
        randName : ""
  });
}

function showIt2(){
  $.yxDialog.createWin({
        message: 'http://www.baidu.com',    //消息框内容(当 iframe 为 true 时， 就输入网址
        width: 800,       //消息框宽度
        height: 300,      //消息框高度
        title: '这里是标题',      //消息框标题
        skin: 'default',        //皮肤， 以 skin 目录下面的皮肤目录名为值
        callbackAble: false,  //是否打开回调事件，默认不打开, 如有需要,手动传送参数到closeWin来启动回调事件
        callback: function(rv) {},  //回调事件，默认空函数, 传入参数为关闭事件的返回值
        dialogTarget: window.top,      // 添加弹出层的目标窗口(有 window.top, window.parent, window.self
        maskAlphaColor: '#ccc', //遮罩透明色，默认黑色
        maskAlpha: 0.6,     //遮罩透明度，默认0.1
        iframe: true,      //iframe模式，默认不是
        hasBootstrapCss:false,  //是否已经有bootstrap 样式引入，如果已有，则不引入自带的样式，样式与 bootstrap 区别在于样式前页会增加 'yx-'; 如原来的 bootstrap 为 .modal-dialog, 则现在为 .yx-modal-dialog
        btn: [{name:"确定", callback: function(){}}, {name:"关闭", callback: function(){}}],        //消息框显示的按钮，默认无(为JSON对象，格式 [{name:"确定", callback: c1}, {name:"关闭", callback: c2}])
        closeTime: 0,     //是否自动关闭，如果数值大于0， 则按毫秒值自动关闭
        fixPosition: false,   // 是否固定位置（即传入的位置[t,l]已经包括了scrollLeft() 和 scrollTop()
        scrollAble: false,      // 是否随滚动条滚动，默认为滚动
        dragable: true,      //是否允许拖动，默认不允许
        resizeable: true,      //是否允许调节窗口大小，默认不允许
        titleBar: true,     //是否显示标题栏，默认显示
        modal: false,      //是否显示遮罩，默认显示
        alarm: true,     //是否打开振动提醒，默认不打开
        winPos: 'l',      //消息框弹出的位置，默认在页面中间(可以输入[0, 0]（left，top）， 或者9个位置，'t'顶，'l'左, 'b'底，'r'右, 'lt'左上, 'lb'左下, 'rt'右上, 'rb'右下, 'c'居中) 
        winAlpha: 0.8,      //拖动时消息框的透明度，默认0.8
        closeBtn: true,     //是否显示关闭按钮，默认显示
        useSlide: false,    //是否启用消息框的淡入淡出效果，默认不启用
        slideSpeed: "slow",   //淡入淡出时间，useSlide=true时有效
        isWinMax: false,        //是否最大化窗口
        maxBtn: true,      //是否显示最大化按钮，默认不显示
        allowSelect:false,    //是否允许选择消息框内容，默认不允许
        allowRightMenu:false, //是否允许在消息框使用右键，默认不允许
        winName : "win2",           //窗口的名称， 以区分多窗口，单窗口时可以不设置
        zIndex : 200,            // 窗口的层次，遮罩为此层次减1
        returnValue : null,     // 返回值， 用于关闭事件时
        randName : ""
  });
}
</script>
</head>
<body>
 
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			 <button class="btn" type="button" onclick="javascript:showIt();">按钮</button>
		</div>
	</div>
</div>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
             <button class="btn" type="button" onclick="javascript:showIt2();">窗口2</button>
        </div>
    </div>
</div>
</body>
</html>
